<script lang="ts" setup>
import { computed, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
// import BenchCompWrapper from "./BenchCompWrapper.vue";
import { queryDailyWeather, queryWeatherNow } from "@/api/bench";
import dayjs from "dayjs";
const router = useRouter();
const data = ref([]);
const WEATHER_CONFIG = [
  {
    codes: [100, 101, 102, 103, 150, 151, 152, 153],
    key: "qing",
    value: "晴"
  },
  {
    codes: [104],
    key: "yin",
    value: "阴"
  },
  {
    codes: [300, 301, 302, 303, 304, 305, 306, 307, 308, 309, 310, 311, 312, 313, 314, 315, 316, 317, 318, 350, 351, 399],
    key: "yu",
    value: "雨"
  },
  {
    codes: [400, 401, 402, 403, 404, 405, 406, 407, 408, 409, 410, 456, 457, 499],
    key: "xue",
    value: "雪"
  },
  {
    codes: [500, 501, 509, 510, 514, 515, 502, 511, 512, 513],
    key: "wumai",
    value: "雾霾"
  },
  {
    codes: [503, 504, 507, 508],
    key: "shachenbao",
    value: "沙尘暴"
  },
  {
    codes: [900, 901, 999],
    key: "default",
    value: "未知"
  }
];
const backgroundUrl = computed(() => {
  const weather = WEATHER_CONFIG.find(item => {
    const code = Number(nowData.value.icon);
    return item.codes.includes(code);
  }) || { key: "default" };
  const url = `/ifp-web-static/image/all/bench/${weather.key}.png`;
  return url;
});
const toWeatherDetail = (fxDate?: string) => {
  // /all/bench/task/announcement
  router.push({
    path: "/all/bench/task/weather",
    query: {
      fxDate
    }
  });
};
const getTemperature = (temp?: string) => {
  return `${temp}℃`;
};
const getDailyWeather = async () => {
  const val = await queryDailyWeather();
  data.value = val.map(item => ({ ...item, customDate: dayjs(item.fxDate).format("MM/DD") }));
};
const nowData = ref<any>({});
const warningData: any = ref([]);
const getWeatherNow = async () => {
  const dateTime = dayjs().format("YYYY-MM-DD");
  const data = await queryWeatherNow(dateTime);
  nowData.value = data?.now || {};
  warningData.value = data?.warning || [];
};
const renderDate = date => {
  return dayjs(date).format("MM/DD");
};
onMounted(() => {
  getWeatherNow();
  getDailyWeather();
});
</script>
<template>
  <div class="weather" :style="`background-image: url(${backgroundUrl});`">
    <div v-show="nowData.icon" class="current-temp">
      <div class="detail">
        <div class="city">北京</div>
        <div class="temp">{{ nowData.temp }}℃</div>
        <div class="date">{{ renderDate(nowData.obsTime) }}</div>
        <p class="temp-range">
          <span class="start">{{ getTemperature(nowData.tempMin) }}</span> ~ <span class="end">{{ getTemperature(nowData.tempMax) }}</span>
        </p>
      </div>
      <div class="icon-current-box">
        <i :class="`qi-${nowData.icon}-fill`" />
        <div class="text">{{ nowData.text }}</div>
      </div>
    </div>

    <div class="warning ml-[8px]">
      <px-tooltip v-for="item in warningData.slice(0, 4)" :key="item.id" :content="item.text">
        <i :class="`qi-${item.type} ${item.severityColor} ml-[8px]`" />
      </px-tooltip>
    </div>
    <div class="future-weather">
      <div class="btn-group">
        <px-button
          v-has="'ALL_BENCH_TASK_WEATHER'"
          style="height: 32px; font-size: 14px; line-height: 32px; color: #fff"
          type="primary"
          text
          link
          @click="toWeatherDetail()"
        >
          查看更多
          <px-icon><ArrowRight /></px-icon>
        </px-button>
      </div>

      <ul class="date-list">
        <li v-for="(item, index) in data.slice(1)" :key="index" class="date-list-item" @click="toWeatherDetail(item.fxDate)">
          <div class="date">{{ item.customDate }}</div>
          <div class="icon-box">
            <i :class="`qi-${item.icon}-fill`" />
          </div>
          <div class="weather-item">{{ item.text }}</div>
          <p class="temperature">
            <span class="start">{{ getTemperature(item.tempMin) }}</span> ~
            <span class="end">{{ getTemperature(item.tempMax) }}</span>
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.weather {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  width: 400px;
  height: 128px;
  padding: 8px 20px;
  color: #fff;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 4px;
}
.future-weather {
  height: 100%;
}
.btn-group {
  height: 32px;
  text-align: right;
}

.warning {
  margin-top: 30px;
  width: 64px;
  height: 72px;
  font-size: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: wrap;
}
.current-temp {
  display: flex;

  .detail {
    padding-top: 4px;
  }

  .city {
    font-size: 14px;
    font-weight: bold;
    line-height: 20px;
  }

  .temp {
    font-size: 28px;
    font-weight: bold;
    line-height: 40px;
    color: #fff;
  }

  .date {
    font-size: 18px;
    font-weight: 600;
    line-height: 25px;
    color: #fff;
  }

  .temp-range {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: #fff;
  }
}

.icon-current-box {
  padding-top: 36px;
  margin-left: 4px;
  font-size: 24px;
  text-align: center;

  .text {
    font-size: 12px;
    line-height: 17px;
  }
}

.icon-box {
  height: 25px;
  font-size: 24px;
  line-height: 25px;
}

.date-list {
  display: flex;
  align-items: center;

  &-item {
    margin-right: 24px;
    // width: 61px;
    text-align: center;
    cursor: pointer;
    &:last-child {
      margin-right: 4px;
    }
  }

  .date {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
  }

  .item-icon {
    height: 23px;
  }

  .weather-item {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
  }

  .temperature {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
  }
}
</style>
